<template>
  <div class="app-container" v-loading="pageLoading">
    <div class="filter-container">
      <el-input style="width: 260px" placeholder="输入单号按回车" class="filter-item" v-model="orderNo">
        <template slot="prepend">单号</template>
      </el-input>
      <el-button class="filter-item" type="success" plain @click="getMainDetail(orderNo)">查询</el-button>
    </div>
    <el-tabs v-model="currentTab" :before-leave="beforeLeave">
      <!-- TAB1 -->
      <el-tab-pane label="基本信息" name="tab1" lazy>
        <tab1 ref="tab1" :orderId.sync="orderId" :isEdit="$route.query.isEdit" :currentTab.sync="currentTab"
          :openDetailDialog.sync="openDetailDialog" :orderNo.sync="orderNo" />
      </el-tab-pane>
      <!-- TAB2 -->
      <el-tab-pane label="单据明细" name="tab2" lazy>
        <tab2 ref="tab2" :orderId.sync="orderId" :openDialog.sync="openDetailDialog" />
      </el-tab-pane>
      <!-- TAB3 -->
      <el-tab-pane label="扫码详情" name="tab3" lazy>
        <tab3 ref="tab3" :orderId.sync="orderId" />
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import tab1 from '@/views/wms/components/orderInfoTab1'
import tab2 from '@/views/wms/components/orderInfoTab2'
import tab3 from '@/views/wms/components/orderInfoTab3'
import dayjs from 'dayjs'
import _ from 'lodash'

export default {
  mixins: [commonMixin],
  name: 'orderInfo',
  components: {
    tab1,
    tab2,
    tab3,
  },
  data: function () {
    return {
      currentTab: 'tab1',
      orderId: this.$route.query.id,
      openDetailDialog: false,
      orderNo: null,
    }
  },
  watch: {},
  methods: {
    beforeLeave(v) {
      if (!this.orderId) {
        this.$message.error('请先创建基本信息')
        return false
      }
    },
    getMainDetail(id) {
      let url = this.$api.order + 'getbyid?order=' + id
      this.$request(url).then((r) => {
        this.orderId = r.id
      })
    },
  },
}
</script>

<style scoped>
</style>
